<template>
  <a-config-provider :locale="zhCN">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </a-config-provider>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import zhCN from 'ant-design-vue/es/locale/zh_CN'
  import { ConfigProvider } from 'ant-design-vue'
  import { useTitle } from '@/hooks/useTitle'
  import { useReg } from '@/hooks/useReg'

  export default defineComponent({
    name: 'App',
    components: {
      [ConfigProvider.name]: ConfigProvider
    },
    setup() {
      useTitle()

      const { hump2KebabCase, kebabCase2Hump } = useReg()
      console.log(hump2KebabCase('CaoYang'))
      console.log(kebabCase2Hump('cao-yang'))

      return {
        zhCN
      }
    }
  })
</script>
